<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    cancelText="关闭"
    :showOkBtn="false"
    :width="width"
    :minHeight="height"
    :destroyOnClose="true"
    @ok="handleOk"
  >
    <div v-if="refresh">
      <template v-if="isComplexRef">
        <component
          :preview="false"
          isUpdate
          detail
          :is="componentItem"
          :pageType="complexDataRef.pageType"
          :dataSource="complexDataRef.modelList"
          :buttons="complexDataRef.buttons"
          :record="modalParams.record"
          :moduleId="modalParams.moduleId"
          v-model:active="activePage"
        />
      </template>
      <component
        v-else
        :record="record"
        @register="register"
        :is="componentItem"
        :closeModal="handleClose"
        @success="handleSuccess"
        @submit="handleSubmit"
        :allData="allData"
        :setModalProps="setModalProps"
        :modalParams="modalParams"
        :params="modalParams.params"
        :modelId="modalParams.modelId"
        :moduleId="modalParams.moduleId"
      />
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref, Ref, markRaw } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CustomFormRegister } from '../../types/custom';
  import { useComponent } from './useComponent';
  // import { dynamicImport } from '../../hooks/dynamicImport';
  // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { isFunction } from '/@/utils/is';

  const emit = defineEmits(['success', 'register', 'cancel']);
  const record = ref<Indexable>({});
  const allData = ref<Indexable>({});
  let getTitle: Ref<string | undefined> = ref();
  let width: Ref<string> = ref('50%');
  const height = ref<number>(200);
  const refresh = ref(false);
  let componentItem: Ref<any> = ref(null);
  const isComplexRef = ref(false);
  const complexDataRef = ref<Indexable>({});
  const modalParams = ref<Indexable>({});
  const activePage = ref(0);
  // 子组件form表单提交
  let formSubmit: Fn;

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    record.value = data.data;
    allData.value = data;
    refresh.value = true;
    const {
      moduleId,
      dataModelId,
      dynamicParams,
      record: rowRecord,
      params,
      title,
      parentModel,
    } = data.btnItem || {};

    modalParams.value = {
      moduleId,
      modelId: dataModelId,
      dynamicParams,
      preview: false,
      isUpdate: true,
      record: rowRecord,
      params,
      title,
      parentModel,
    };

    setModalProps({
      loading: true,
      confirmLoading: true,
    });

    const { component, isComplex, complexData } = await useComponent(data.btnItem);

    componentItem.value = markRaw(component);

    isComplexRef.value = isComplex;
    complexDataRef.value = complexData || {};
    getTitle.value = data.paramsObj?.title || data.btnItem.label;
    width.value = data.btnItem.width || width.value;
    height.value = data.paramsObj?.height || height.value;
    setModalProps({
      loading: false,
      confirmLoading: false,
    });
  });

  let registerObj: any = {};
  const register = (val: CustomFormRegister) => {
    registerObj = val;
    registerObj.modalParams && setModalProps(registerObj.modalParams);
  };

  // const handleSubmit = async () => {
  //   if (registerObj.validate) {
  //     let values = await registerObj.validate();
  //     registerObj.submit(values);
  //     refresh.value = false;
  //     handleSuccess(values);
  //   }
  // };

  const handleSubmit = (val) => {
    formSubmit = val;
  };

  const handleOk = () => {
    isFunction(formSubmit) && formSubmit();
  };

  function handleClose() {
    closeModal();
    modalParams.value = {};
    refresh.value = false;
    componentItem.value = '';
    emit('cancel');
  }
  const handleSuccess = (data) => {
    emit('success', data);
  };
</script>

<style lang="less" scoped></style>
